import styles from './index.module.less'
import { Tabs } from '@terminus/nusi-slim'
import { Logs, Setting, Filter } from '@terminus/nusi-slim-icons'
import { useState } from 'react'
import DocumentTab from './DocumentTab'
import SettingTab from './SettingTab'
import FilterTab from './FilterTab'


const ConfigPanel = () => {

  const [activeKey, setActiveKey] = useState<string>('document')

  return (
    <div className={styles.configPanel}>
      <Tabs
        className={styles.tabs}
        underline
        items={[
          { label: <Logs size="16px" />, key: 'document', children: <DocumentTab /> }, 
          { label: <Setting size="16px" />, key: 'setting', children: <SettingTab /> }, 
          { label: <Filter size="16px" />, key: 'filter', children: <FilterTab /> }
        ]}
        activeKey={activeKey} onChange={setActiveKey} />
    </div>
  )
}

export default ConfigPanel

